<%@page import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="for" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <style>
        .icon {
            margin:30px;
            border: solid 2px gray;
            width: 250px;
            height: 250px;
            text-align: center;
            float: left;
        }
    </style>
</head>
<body>
<div id="m-Catalog02">
    <div id="common-header">
        <div class="clearfix" id="headerTop">
            <div id="left">
                <select>
                    <option>USA</option>
                    <option>UK</option>
                    <option>CN</option>
                </select>
                <span><a href="#">DAILDY DEALS</a></span>
                <span><a href="#">DAILDY DEALS</a></span>
                <span><a href="#">DAILDY DEALS</a></span>
                <span><a href="#">DAILDY DEALS</a></span>
            </div>
            <div id="right">
                <c:choose>
                    <c:when test="${empty sessionScope.user}">
                        <span id="user"><a href="<c:url value="/jsps/user/login.jsp" />"><i class="fa fa-user"></i>登录</a></span>
                        <span id="shopcar"><a href="<c:url value='/regesit.jsp'/>"><i class="fa fa-shopping-cart"></i>注册</a></span>
                    </c:when>
                    <c:otherwise>
                        <span id="user"><i class="fa fa-user"></i>${user.getUsername()}</span>
                        <span id="shopcar"><a href="<c:url value='/UserServlet?method=quit'/>"><i class="fa fa-shopping-cart"></i>退出</a></span>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
        <div id="headerMain" class="clearfix">
            <img src="http://ozz8m4qhr.bkt.clouddn.com/loge.png" width="59" height="24" id="loge">
            <ul id="nav" class="clearfix">
                <li class="navLi">
                    <div class="navDiv">
                        <a href="<c:url value='/ProductServlet?method=findByCid&cid=1' />">
                            WOMEN<i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                </li>
                <li class="navLi">
                    <div class="navDiv">
                        <a href="<c:url value='/ProductServlet?method=findByCid&cid=2'/>">
                            MAN<i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                </li>
                <li class="navLi">
                    <div class="navDiv">
                        <a href="<c:url value='/ProductServlet?method=findByCid&cid=3'/>">
                            KIDS<i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                </li>
                <li class="navLi">
                    <div class="navDiv">
                        <a>
                            ACCESSORIES<i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                </li>
            </ul>
            <div id="search">
                <span id="searchSpan1">LIVE FILLING-ROOM</span>
                <span id="searchSpan2"><span>ECO</span>FRIENDLY</span>
                <i class="fa fa-search"></i>
            </div>
        </div>
    </div>
    <header>
        <ul class="head_nav clearfix">
            <li><a href="#">100% STUDENTDISCOUNT ></a></li>
            <li><a href="#">$9.95 - UNLIMITEDNEXT_DAY DELIVERY FORIYR ></a></li>
            <li><a href="#">FREE DELIVERY WORLDWIDE ></a></li>
        </ul>
        <div class="banner">
            <div id="carousel">
                <script type="text/html" id="bannerList">
                    {{each data as value index}}
                    <img src="{{value.imgPath}}"/>
                    {{/each}}
                </script>
            </div>
        </div>
    </header>
   <div class="section clearfix">
        <ul class="sec_header">
            <li>尺寸大小：
                <select style="width: 100px">
                    <option>SIZE</option>
                    <option>XS</option>
                    <option>S</option>
                    <option>M</option>
                    <option>L</option>
                    <option>XL</option>
                </select>
            </li>
            <li>JEANS</li>
            <li>品牌选取:&nbsp;&nbsp;
                <select class="sel" style="width: 200px">
                    <option>阿迪达斯</option>
                    <option>耐克</option>
                    <option>鸿星尔克</option>
                    <option>李宁</option>
                </select>
            </li>
        </ul>

       <!-- 折扣专卖区-->
        <div class="sec_left" style="border: 1px solid orange">
            <script type="text/html" id="Count">
                {{each count as value index}}
                    <p class="count">{{value.title}}</p>
                    <img src="{{value.imgPath}}">
                    <p class="price">price:{{value.price}}</p>
                {{/each}}
            </script>
        </div>

       <!-- 商品图片展示区-->
       <div class="sec_right" >
           <for:forEach items="${requestScope.products}" var="temp">
               <div class="icon">
                   <a href="<c:url value='/ProductServlet?method=load&pid=${temp.getPid()}' />">
                       <img src="${temp.getImgurl()}" style="width: 234px;height: 189px;"/>
                   </a><br/>
                   <span>价格：${temp.getPrice()}</span><br>
                   <a href="">
                       <span>描述：${temp.getPname()}</span>
                   </a><br/>
               </div>
           </for:forEach>
       </div>
   </div>
    <div id="common-footer">
        <div id="footerTop">
            <ul id="list" class="clearfix">
                <li>
                    <p>QUESTIONS?</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
                <li>
                    <p>WHAT'S IN STORE</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
                <li>
                    <p>MORE ABOUT</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
                <li>
                    <p>QUESTIONS?</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
                <li>
                    <p>MORE ABOUT</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
            </ul>

            <p id="check">SHOPPING TO
                <select>
                    <option>USA</option>
                </select>
            </p>
            <img src="img/Catalog02/footer.jpg" width="388" height="22">
        </div>
        <div id="footerBottom">
        <span id="span1">
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
        </span><br>
            <span id="span2">this namsssw sswxzsja sjjcvud  skkvis</span><br>
            <span>
            <i class="fa fa-facebook"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-google"></i>
            <i class="fa fa-linkedin"></i>
        </span>
        </div>
    </div>
</div>
<script src="js/lib/template-web.js"></script>
<script src="js/lib/jquery.min.js"></script>
<script src="js/module/Catalog02.js"></script>
<script src="js/lib/velocity.min.js"></script>
</body>
</html>